<template>
  <div>ICON</div>
</template>
<script setup lang="ts">
export interface IconPickerProps {
  modelValue?: string
  width?: number // icon名称
  span?: number // icon名称
}
// props 默认值
const props = withDefaults(defineProps<IconPickerProps>(), {
  modelValue: 'api',
  width: 500,
  span: 24
})
const visible = ref(false)
const activeTab = ref('svg')
const iconPickerRef = ref()
const popoverContentRef = ref()
const svgIcons: string[] = []
const filteredSvgIcons = ref<string[]>([])
const filteredEpIcons = ref<string[]>([])
const emit = defineEmits(['update:modelValue'])
const iconValue = toRef(props, 'modelValue')
const searchIcon = ref('')
const loadSvgIcons = () => {
  const icons = import.meta.glob('../../assets/svg/icons/*.svg')
  for (const item in icons) {
    const iconName = item.replace(/.*\/(.*)\.svg$/, '$1')
    svgIcons.push(iconName)
  }
  filteredSvgIcons.value = svgIcons
}

const selectIcon = (iconClass: string) => {
  if (activeTab.value === 'element') {
    iconClass = 'el-icon-' + iconClass
  }
  emit('update:modelValue', iconClass)
  visible.value = false
}

const filterIcons = () => {
  if (activeTab.value === 'svg') {
    // 过滤SVG图标逻辑
    filteredSvgIcons.value = searchIcon.value
      ? svgIcons.filter(iconName => iconName.toLowerCase().includes(searchIcon.value.toLowerCase()))
      : svgIcons
  } else {
    // 过滤Element Plus图标逻辑 TODO
  }
}
const handleTabClick = (tabName: any) => {
  activeTab.value = tabName.name
  filterIcons()
}
onClickOutside(iconPickerRef, () => (visible.value = false), {
  ignore: [popoverContentRef]
})
onMounted(() => {
  loadSvgIcons()
})
</script>
<style scoped lang="scss">
.input-cursor-pointer :deep(.el-input__wrapper),
.input-cursor-pointer :deep(.el-input__inner) {
  cursor: pointer;
}
.icon-container {
  display: flex;
  flex-wrap: wrap;
  .icon-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin: 4px;
    cursor: pointer;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    transition: all 0.3s;
  }
  .icon-item:hover {
    border-color: #4080ff;
    scale: 1.2;
  }
}
</style>
